import { AspectRatioDemos } from '@docs/demos';
import { Layout } from '@/layout';
import { MDX_DATA } from '@/mdx';

export default Layout(MDX_DATA.AspectRatio);

## Usage

`AspectRatio` maintains a consistent width/height ratio.
It can be used to display images, maps, videos and other media.

<Demo data={AspectRatioDemos.image} />

## Map embed

<Demo data={AspectRatioDemos.map} />

## Video embed

<Demo data={AspectRatioDemos.video} />

## Inside flex container

By default, `AspectRatio` does not have fixed width and height, it will take as much space as possible
in a regular container. However, when used inside a flex container, it will not stretch to fill the available space.
To make it work inside flexbox container, you need to set `width` or `flex` property.

<Demo data={AspectRatioDemos.flex} />
